<template>
    <f7-page>
         <f7-navbar title="发布司机运输" back-link="返回"></f7-navbar>

        <f7-card class="card_nav">
            <f7-card-header>
               <img src='../../assets/img/driver-car.png' class="infor-face">
                <div class="text-center_article">{{passInfo.truck_num}}</div>
                <div class="text-center_weight"> 载重{{passInfo.truck_weight}}吨</div>
                <div class="text-right">
                    <span>{{passInfo.user_name}}</span>
                    <img src='../../assets/img/infor-face.png' class="infor-log">
                </div>
            </f7-card-header>
            <f7-card-header>
                <div class="card-left">
                    <img src='../../assets/img/line-icon.png' class="line-icon">
                    <div class="pull-left">
                        <b>{{passInfo.start_province}}</b>
                        <span v-if="passInfo.start_city">{{passInfo.start_city.length}}个市</span>
                    </div>
                </div>
                <div class="card-center">
                    <h5 class="text-orange" v-if="passInfo.money">去：￥{{passInfo.money}}元/吨</h5>
                    <h5 class="text-orange" v-if="!passInfo.money">以我方出价为标准</h5>
                    <h5 class="status-bg text-orange " v-if="passInfo.unmoney">回：￥{{passInfo.unmoney}}元/吨</h5>
                    <h5 class="status-bg text-orange" v-if="!passInfo.unmoney">以我方出价为标准</h5>
                </div>
                <div class="card-right">
                    <div class="pull-right">
                        <b>{{passInfo.end_province}}</b>
                        <span v-if="passInfo.end_city">{{passInfo.end_city.length}}个市</span>
                    </div>
                </div>
            </f7-card-header>
        </f7-card>


        <div class="bg-white gap-20 " @click="delogSetPrductType()">
            <div class="list-item bold text-purple text-align-center" v-if="productType.length==0">
               设置产品分类
            </div>
            <div class="list-item bold" v-else style="position: relative;">
                <img src='../../assets/img/pass-icon6.png' class="label-icon-no">
                <template v-for="item in productType" >
                    {{item}}
                </template>
                <f7-icon f7="right" color="gray" class="gray_category"></f7-icon>
            </div>
        </div>

        <div class="bg-white gap-20 " v-if="productCateParam.attribute">
            <div class="list-item bold text-purple text-align-center" @click="delogSetProductCategory()" >
                添加产品
            </div>
            <div class="list-item " v-if="productCate.length>0">
                <template v-for="item,index in productCate" >
                    <div class="item-add">
                                        <h6>
                                            {{item.name}}
                                            <span v-if="item.proAttr.measure_unit.length>0">
                                                ({{item.proAttr.measure_unit[0].name}}:
                                                {{item.proAttr.measure_unit[0].value}}{{item.proAttr.measure_unit[0].unit}})
                                            </span>
                                        </h6>
                                        <span v-for="attr in  item.proAttr.attribute" v-if="attr.name!='理计'">
                                            {{attr.name}}:{{attr.value}}{{attr.unit}}
                                        </span>
                      </div>
                       <div class="item-fot">
                                    <span>
                                      运输重量(吨)
                                    </span>
                                    <span class="float-right">
                                      单位:
                                        <i v-if="item.proAttr.measure_unit.length>0">件</i>
                                        <i v-else>吨</i>
                                    </span>
                        </div>
                         <div class="Add_subtract" >
                             <span class="text-gray1" v-if="item.proAttr.measure_unit.length>0">{{item.value*item.proAttr.measure_unit[0].value}}吨</span>
                             <span class="text-gray1" v-else>{{item.value}}吨</span>
                             <span class="float-right">
                                        <f7-badge class="num"><span @click="doProNum('minus',item,index)">-</span></f7-badge>
                                        <input type="number" placeholder="0" class="number_err" min="0" v-model="item.value">
                                        <!-- {{item.value}} -->
                                        <f7-badge class="num"><span @click="doProNum('add',item,index)">+</span></f7-badge>
                              </span>
                        </div>
                </template>
            </div>
        </div>
          <f7-list>
            <div class="item-address" @click="goAdds('th')">
                <img src="../../assets/img/landmark.png" class="landmark">
                <h2 class="text-black">提货地址</h2>
                <h5 class="text-gray1">
                    个人地址：{{addsStr.th.str}}</h5>
                <h5 class="text-gray1">联系人：{{addsStr.th.src.prin_name}}
                    &nbsp;&nbsp;&nbsp;&nbsp;手机号：{{addsStr.th.src.prin_phone}}</h5>
                <f7-icon f7="right" color="gray" class="color-gray"></f7-icon>
            </div>
            <div class="item-address" @click="goAdds('sh')">
                <img src="../../assets/img/landmark-1.png" class="landmark">
                <h2 class="text-black">收货地址</h2>
                <h5 class="text-gray1">
                     个人地址：{{addsStr.sh.str}}</h5>
              <h5 class="text-gray1">联系人：{{addsStr.sh.src.prin_name}}
                    &nbsp;&nbsp;&nbsp;&nbsp;手机号：{{addsStr.sh.src.prin_phone}}</h5>
                <f7-icon f7="right" color="gray" class="color-gray"></f7-icon>
            </div>
        </f7-list>


         <f7-list form>
            <f7-list-item>
                <div class="item-title">运费(元/吨)</div>
                <div class="item-input">
                <input type="text" placeholder="请输入" class="Please_enter" v-model="formData.price">
                </div>
            </f7-list-item>
            <f7-list-item>
                <div class="item-title">信息费(元/车)</div>
                <div class="item-input">
                <input type="text" placeholder="请输入"  class="Please_enter" v-model="formData.tip_price">
                </div>
            </f7-list-item>
         </f7-list>

         <div class="z_item">
            <div>
                <ul>
                    <li>
                        司机接单截止时间
                        <f7-icon f7="right" class="arrow-gray"></f7-icon>
                        <!--<span class="z_item_rt" >2018.07.31 16:05</span>-->
                        <myDatepicker @dtpkChange="driverDeadline"></myDatepicker>
                    </li>
                </ul>
            </div>



            <div>
                <ul>
                     <li>
                        选择提货时间
                        <f7-icon f7="right" class="arrow-gray"></f7-icon>
                        <select class="sele" v-model="formData.date_type">
                            <option  v-for="item in option1"  :value="item.val">{{item.name}}</option>
                        </select>
                     </li>
                    <template v-if="formData.date_type=='start'">
                        <li>
                            自确认计划几日后提货
                            <input type="text" placeholder="请输入"  class="Please_thetxt" v-model="formData.start_type">
                        </li>
                        <li>
                            <small>填写0时，物流可进行派车 </small>
                        </li>
                    </template>
                    <template v-else>
                        <li>
                            选择日期
                            <f7-icon f7="right" class="arrow-gray"></f7-icon>
                            <select class="sele" v-model="formData.cut_type">
                                <option  v-for="item in option2"  :value="item.val">{{item.name}}</option>
                            </select>
                        </li>
                        <li>
                            具体时间
                            <input type="text" placeholder="请输入"  class="Please_thetxt" v-model="formData.cut_date">
                        </li>
                        <li>
                            未按时提货扣款
                            <input type="text" placeholder="请输入"  class="Please_thetxt" v-model="formData.timeout_price">
                        </li>
                        <li>
                            提货完成百分比不计扣款
                            <input type="text" placeholder="请输入"  class="Please_thetxt" v-model="formData.not_count_price">
                        </li>
                    </template>

                </ul>
            </div>

             <div>
                <ul>
                    <li>
                       司机交货截止时间
                       <f7-icon f7="right" class="arrow-gray"></f7-icon>
                        <myDatepicker @dtpkChange="timeArrival"></myDatepicker>
                        <!--<span class="z_item_rt" >选填</span>-->
                    </li>
                </ul>
            </div>


            <div>
                <ul>
                    <li @click="setPaymentMethod">
                       运费付款方式
                       <f7-icon f7="right" class="arrow-gray"></f7-icon>
                        <span class="z_item_rt" >{{selPaymentMethodVal.val}} </span>
                    </li>
                    <li @click="setPaymentType"> 运费付款类型
                       <f7-icon f7="right" class="arrow-gray"></f7-icon>
                        <span class="z_item_rt" >{{selPaymentTypeVal.val}}</span>
                    </li>
                </ul>
            </div>


            <div>
                <ul>
                    <li @click="setPaymentObj">
                       运费付款方
                       <f7-icon f7="right" class="arrow-gray"></f7-icon>
                        <span class="z_item_rt" >{{selPaymentObjVal.val}}</span>
                    </li>
                </ul>
            </div>

        </div>



          <div class="gap-20">
                    <h4 class="gap-row list-inset">按以下过磅凭证结算运费</h4>
                    <div class="bg-white">
                        <div class="reg-radio reg-radio1 row">
                            <div class="col col-50">
                                 <label class="checkbox Check_box">
                                     <input  type="radio"  value="get" name="freight_voucher" v-model="formData.freight_voucher.style">
                                     <i class="icon-checkbox"></i>
                                 </label>
                                发货方
                            </div>
                            <div class="col col-50">
                                <label class="checkbox Check_box">
                                    <input  type="radio" value="fact" name="freight_voucher" v-model="formData.freight_voucher.style">
                                    <i class="icon-checkbox"></i>
                                </label>
                                收货方
                            </div>

                        </div>

                        <ul class="weigh-list" v-if="formData.freight_voucher.style=='get'">
                           <li class="ng-binding" :class="{'active':item.checked}" v-for="item,index in formData.freight_voucher.get" @click="freightVoucherClick(formData.freight_voucher.style,index)">
                                {{item.text}}
                            </li>
                            <div class="clearfix"></div>
                        </ul>
                        <ul class="weigh-list" v-else>
                            <li class="ng-binding" :class="{'active':item.checked}" v-for="item,index in formData.freight_voucher.fact" @click="freightVoucherClick(formData.freight_voucher.style,index)">
                                {{item.text}}
                            </li>
                            <div class="clearfix"></div>
                        </ul>
                    </div>
                </div>


                 <div class="gap-20">
                    <h4 class="gap-row list-inset">运输途耗标准</h4>
                    <f7-list form class="ul_list">
                        <f7-list-item>
                            <div class="item-title">合理路耗(%)</div>
                            <div class="item-input">
                            <input type="text" placeholder="请输入" class="Please_enter" v-model="formData.att_traffic.one[1]">
                            </div>
                        </f7-list-item>
                        <f7-list-item>
                            <div class="item-title">扣款标准(元/吨)</div>
                            <div class="item-input">
                            <input type="text" placeholder="请输入"  class="Please_enter" v-model="formData.att_traffic.one[2]">
                            </div>
                        </f7-list-item>
                   </f7-list>

                </div>

               <div class="bg-white gap-20 Under_gap">
                    <div class="list-item">
                        <label class="item">
                            <textarea class="list-input text-gray1"   placeholder="请补充描述" v-model="formData.appendix"></textarea>
                        </label>
                    </div>
                </div>




         <f7-toolbar>
            <div class="button-foot" @click="save()">
                <div class="col">
                    <f7-link>立即指派</f7-link>
                </div>
            </div>
        </f7-toolbar>
        <setProductType ref="setPrductType" @setProductTypeDone="setProductTypeDoneEmit"></setProductType>
        <setProductCategory ref="setPrductCategory" @setProductCateDoneEmit="setProductCateDoneEmit" :data="productCateParam"></setProductCategory>
        <actionSheet :data="selPaymentMethodDate" ref="paymentMethodAction" @actionEmit="paymentMethodActionDone"></actionSheet>
        <actionSheet :data="selPaymentTypeDate" ref="paymentTypeAction" @actionEmit="paymentTypeActionDone"></actionSheet>
        <actionSheet :data="selPaymentObjDate" ref="paymentObjAction" @actionEmit="paymentObjActionDone"></actionSheet>
    </f7-page>
</template>

<script>
    import actionSheet from '../../components/actionSheet'
    import maps from '../../utils/maps'
    import myDatepicker from '../../components/datetimepicker'
    import setProductType  from '../../components/setProductType.vue'
    import setProductCategory  from '../../components/setProductCategory.vue'
    import F7Page from "framework7-vue/src/components/page"
    import common from '../../utils/common.js'
    export default {
        name: "passDtl",
        components: {F7Page,setProductType,
            setProductCategory,myDatepicker,actionSheet},
        data(){
            return{
                formData:{
                    appendix:'',//备注
                    att_traffic:{
                        one: [1, '15', 0]
                    },//合理路耗
                    freight_voucher:{
                        style:'fact',
                        get:[{ text: "过磅单", checked: true }, { text: "派车单", checked: false }],
                        fact:[{ text: "过磅单", checked: true }, { text: "派车单", checked: false }]
                    },//按一下过磅凭证

                    //运费付款类型、方式、对象
                    payment_payer:"",
                    payment_choice:"",
                    payment_method :"all_goods",
                    time_arrival:'',//司机交货截止时间
                    date_type:"start", // 选择提货时间
                    start_type:10,//选择提货时间-提货开始时间
                    //选择提货时间-提货截止时间
                    cut_type:"today",
                    cut_date:24,
                    timeout_price:'',
                    not_count_price:'',
                    time_validity:'',//司机接单截止时间
                    tip_price:'',//信息费
                    price:'',//运费
                    //提货地址与收获地址
                    receive_id:"",
                    send_id:"",

                    //这些是不需要用户填写的
                    company_name: this.Storage.get('company').company.nick_name,//本号公司名称


                    platform_driver:[],//平台推荐

                     user_ids:[],//指派司机的id号

                    //写死
                    price_type:"fix",
                    quality_origin:"demand",
                    scene:"line",


                    //双方物流、三方物流(orderid)、根据线路下单
                    // scene:"both",
                    line:'',

                    //产品
                    product_categories:[{}]




                },



                passInfo:'',
                productType:[],
                productCate:{},
                productTypeSd:{},
                productCateParam:{},
                addsType:'',
                addsStr:{
                    th:{
                        str:'',
                        src:{}
                    },
                    sh:{
                        str:'',
                        src:{}
                    }
                },
                option1:[
                    {name:'提货起始时间',val:'start'},
                    {name:'提货截止时间',val:'cut'}
                ],
                option2:[
                    {name:'今天',val:'today'},
                    {name:'明天',val:'morrow'}
                ],
                selPaymentMethodDate:maps.selPaymentMethod,
                selPaymentTypeDate:maps.selPaymentType,
                selPaymentObjDate:maps.selPaymentObj,
                selPaymentMethodVal:{},
                selPaymentTypeVal:{},
                selPaymentObjVal:{},
            }
        },
        methods:{
            async passDtls () {
                let param = {line_id: this.$f7Route.params.lineid}
                this.passInfo = (await this.LineService.passDetails(param)).data.data
                this.formData.user_ids[0]=this.passInfo.user_id
                this.formData.line=this.passInfo._id
            },
            delogSetPrductType(){
                this.$refs.setPrductType.openPop()
            },
            delogSetProductCategory(){
                this.$refs.setPrductCategory.openPop()
            },
            setProductTypeDoneEmit(data){
                this.$refs.setPrductCategory.clearDate()
                this.productTypeSd=data.productTypeSd;
                this.productCate=[];
                this.productType=data.productType;
                this.productCateParam=data.productCate;

                //产品类型
                let proDct=this.formData.product_categories[0];
                proDct.pass_price=1;//交易指给物流的，因为没走交易，所以写死了
                proDct.pass_amount=0;
                proDct.unit=data.productCate.unit[0].unit;//产品单位
                proDct.pass_unit=data.productCate.unit[1].unit;//运输单位
                for(let k in data.productTypeSd){
                    if(k==0){
                        proDct.material=data.productTypeSd[k].eng;
                        proDct.material_chn=data.productTypeSd[k].chn;
                    }else{
                        let temp1='layer_'+k;
                        let temp2='layer_'+k+'_chn';
                        proDct[temp1]=data.productTypeSd[k].eng;
                        proDct[temp2]=data.productTypeSd[k].chn;
                    }
                }
            },
            setProductCateDoneEmit(data){
                this.productCate=[];
                this.productCate=data.productCate;

                //先获取理计
                this.formData.product_categories[0].product_name=[];
                data.productCate.forEach( (item,index) =>{
                    let liji=data.productCate[index].proAttr.measure_unit.length===0?1:data.productCate[index].proAttr.measure_unit[0].value
                    this.formData.product_categories[0].product_name.push({
                        'name':item.name,
                        'number':item.value,
                        'amount_unit':liji,
                        'amount':liji*item.value,
                        // 'measure_unit':liji,
                        'measure_unit':[item.proAttr.attribute[0]],
                        'attribute':item.proAttr.attribute
                    })
                })
            },
            goAdds(type){
                this.addsType=type;
                this.$f7.router.navigate('/mine/address/:source?')
            },
            driverDeadline(data){
                this.formData.time_validity=data
            },
            setPaymentMethod(){
                this.$refs.paymentMethodAction.openAction()
            },
            setPaymentType(){
                this.$refs.paymentTypeAction.openAction()
            },
            setPaymentObj(){
                this.$refs.paymentObjAction.openAction()
            },
            paymentMethodActionDone(data){
                this.selPaymentMethodVal=data
            },
            paymentTypeActionDone(data){
                this.selPaymentTypeVal=data
            },
            paymentObjActionDone(data){
                this.selPaymentObjVal=data
            },
            //运费付款方式相关数据初始化
            initSelPaymentMethodDate(){
                common.addAttrSwitch(this.selPaymentMethodDate)
                this.selPaymentMethodDate[0].switch=true;
                this.selPaymentMethodDate.forEach( (item)=> {
                    if(item.switch){
                        this.selPaymentMethodVal=item
                    }
                })
            },
            //运费付款类型相关数据初始化
            initSelPaymentTypeDate(){
                common.addAttrSwitch(this.selPaymentTypeDate)
                this.selPaymentTypeDate[0].switch=true;
                this.selPaymentTypeDate.forEach( (item)=> {
                    if(item.switch){
                        this.selPaymentTypeVal=item
                    }
                })
            },
            //运费付款人相关数据初始化
            initSelPaymentObjDate(){
                common.addAttrSwitch(this.selPaymentObjDate)
                this.selPaymentObjDate[0].switch=true;
                this.selPaymentObjDate.forEach( (item)=> {
                    if(item.switch){
                        this.selPaymentObjVal=item;
                    }
                })
            },
            freightVoucherClick(type,index){
                this.formData.freight_voucher[type][index].checked=!this.formData.freight_voucher[type][index].checked
                this.$set(this.formData.freight_voucher[type],index,this.formData.freight_voucher[type][index])
            },
            doProNum(type,item,index){
                switch (type) {
                    case 'minus':
                        item.value--
                        break;
                    case 'add':
                        item.value++
                }
                this.$set(this.productCate,index,item)

                //也要对后端那个参数重新复制(主要是吨数和件数)
                let it1=this.formData.product_categories[0];
                let it2=it1.product_name[index];
                it2.number=item.value
                it2.amount=Number(item.value)*Number(it2.measure_unit[0].value)

                it1.pass_amount=0;
                it1.product_name.forEach(function (item) {
                    it1.pass_amount+=item.amount
                })

            },
            timeArrival(data){
                this.formData.time_arrival=data;
            },
            async save(){
                //最后一刻，再计算一下运费吧
                let pass_amount=this.formData.product_categories[0].pass_amount;
                this.formData.product_categories[0].pass_price=pass_amount*Number(this.formData.price)

                let addBothRes=await this.LineService.addBoth(this.formData);

                if(addBothRes.data.status=='success'){
                    this.toast('指派成功')
                    setTimeout( () =>{
                        this.$f7.router.back()
                    },2000)
                }else{
                    this.toast(addBothRes.data.msg)
                }

            }
        },
        created(){
            this.initSelPaymentMethodDate()
            this.initSelPaymentTypeDate()
            this.initSelPaymentObjDate()
            this.passDtls()
        },
        watch: {
            '$store.state.adds'(val) {
                if(val==''){return;}
                let addStr=`${val.province} ${val.city} ${val.district}`
                this.addsStr[this.addsType].str=addStr
                this.addsStr[this.addsType].src=val;
                switch (this.addsType) {
                    case 'th':
                        this.formData.receive_id= val._id;
                        break;
                    case 'sh':
                        this.formData.send_id= val._id;
                        break;

                }
            },
            'selPaymentObjVal'(that){
                this.formData.payment_payer=that.key;
            },
            'selPaymentTypeVal'(that){
                this.formData.payment_choice=that.key;
            },
            'selPaymentMethodVal'(that){
                this.formData.payment_method=that.key;
            }

        }
    }
</script>

<style scoped>
.item-add {
  background: #f8fff0;
  padding: 4px 10px;
  margin: 10px 0px;
  border-left: 1px solid green;
}

.item-add h6 {
  width: 100%;
  color: rgb(51, 140, 37);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  display: inline-block;
}
.item-add span{
    width: 50%;
    display: inline-block;
    font-size: 12px;
    color: rgb(51, 140, 37);
}
.item-fot{
  margin-top: 5px;
}
.item-fot {
  font-size: 12px;
  color: #666;
}
.item-fot span i {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-weight: initial;
}
.Add_subtract{
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 5px;
}

.Add_subtract .number_err {
    width: 60px  !important;
    background: #f4f4f4;
    height: 27px;
    line-height: 28px;
    border-radius: 2px;
    margin: 0 5px;
    text-align: center;
    display: inline-block;
}
.Add_subtract .num{
      background: #f4f4f4 !important;
      font-size: 14px;
      margin: 0px 5px;
      color: #333;
      height: 25px;
    line-height: 24px;
    width: 25px;
    border-radius: 0px !important;
}
.Under_gap{
    margin-bottom: 30px;
}


/* 0801底部 */
.gap-row {
    padding: 10px 0;
}
.list-inset {
    margin: 0 15px;
}
.reg-radio1 {
    padding: 15px;
}
.reg-radio .col.col-50 {
    padding: 3px 0;
}
.Check_box {
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    top: -2px;
    margin: 0 10px 0 0;
}
.weigh-list {
    padding: 0px;
    margin: 5px 0 0 15px;
}
.weigh-list li {
    border: 1px solid #F5F5F5;
    border-radius: 3px;
    margin: 0 10px 20px 0;
    padding: 3px;
    color: #333;
    min-width: 23.5%;
    max-width: 23.5%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    text-align: center;
    float: left;
}
.weigh-list li.active {
    border-color: #6E6EE9;
    color: #6E6EE9;
    background: rgba(143,143,235,.1);
}
.clearfix {
    clear: both;
}
.ul_list{
    margin: 0px !important;
}
.list-input{
    width: 100%;
    min-height: 44px;
}














.card_nav {
     padding: 10px 0px;
      border-radius: 0px !important;
      margin: 0px !important;
      box-shadow:none !important;
}
.ios .card-header {
        padding: 4px 15px;
        min-height: 55px;
        position: static;
    }

    .text-right {
        text-align: center;
    }

    .infor-log {
        max-width: 24px;
        max-height: 24px;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
      .infor-face {
        max-width: 38px;
        max-height: 38px;
        width: 100%;
        height: 100%;
    }
       .text-center_article {
        position: absolute;
        font-size: 14px;
        color: #A2A2F0;
        padding-left: 50px;
        top:15px;
    }
    .text-center_weight{
        font-size: 12px;
        position: absolute;
        padding-left: 50px;
        color: #999;
        top:37px;
    }
    .text-right span {
        margin: 0 0 3px 0;
        font-size: 10px;
        color: #999;
        display: inherit;
    }



    .line-icon {
        position: absolute;
        left: 16px;
        width: 16px;
        height: 45px;
        top:75px;
    }
.label-icon-no{
    width: 32px;
    height: 16px;
    vertical-align: text-bottom;
    margin-right: 7px;
    }
    .pull-left {
        text-align: left;
        margin-left: 24px;
    }

    .pull-left b {
        font-size: 14px;
        color: #000;
        display: block;
    }

    .pull-left span {
        font-size: 12px;
        color: #666;
        display: block;
           width: 60px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .text-orange {
        color: #ff6c00;
        font-weight: normal !important;
        font-size: 13px;
        text-align: center;
    }

    .status-bg {
        background: url('../../assets/img/route-bg.png') no-repeat top center;
        background-size: 95px 4px;
        margin-top: 6px;
        padding-top: 10px;
    }

    .card-right {
        text-align: center;
    }

    .pull-right {
        text-align: right;
    }

    .pull-right b {
        font-size: 14px;
        color: #000;
        display: block;
    }

    .pull-right span {
        margin: 0 0 3px 0;
        font-size: 10px;
        color: #999;
        display: inherit;
           width: 60px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
.list-item {
    font-size: 14px;
    border: none;
    padding: 13px 15px;
}
.gap-20{
    margin-top: 20px;
}
.text-purple {
    color: #A2A2F0;
}
.bold {
    font-weight: bold;
}
.text-gray1 {
    color: #666;
}
.bg-white{
    background: #fff;
}
.ios .list {
        margin: 20px 0px 0px 0px;
        background: #fff;
    }
.item-address {
        position: relative;
        border: none;
        padding: 10px 0 8px 50px;
        min-height: 0;
        border-bottom: 1px solid #f5f5f5;
}
.item-address h2 {
        font-size: 14px;
        margin: 0;
}
.item-address h5 {
        font-size: 12px;
        margin: 0;
}
.landmark {
        position: absolute;
        border-radius: 0;
        width: 21px;
        height: 30px;
        left: 15px;
        top: 12px;
}
.color-gray {
     position: absolute;
        top: 30px;
        color: #8e8e93;
        font-size: 20px;
        right: 10px;
}
.gray_category {
       position: absolute;
        top: 12px;
        color: #8e8e93;
        font-size: 20px;
        right: 10px;
}
.ios .list {
    margin: 20px 0;
    font-size: 17px;
  }
    .Please_enter {
    height: 44px;
    color: #333;
    font-size: 12px !important;
    text-align: right;
  }
/* 列表 */
    .z_item ul{
        padding-left:0;
        font:inherit;
        font-size: 100%;
        font-family: "微软雅黑";
        color: #444;
    }
    .z_item li{
        background: white;
        padding-left: 10px;
        border-bottom: 1px solid #f5f5f5;
        line-height: 40px;
        color: #333;
    }
    .z_item .z_item_rt{
        float: right;
        margin-right: 10px;
        color: #999;
         text-align: right;
        font-weight: normal;
    }
  .arrow-gray {
      float: right;
        color: #8e8e93;
        font-size: 20px;
       margin-right:10px;
       margin-top: 10px;
}
.Please_thetxt{
    height: 41px;
    color: #333;
    font-size: 12px !important;
    text-align: right;
    float:right;
    margin-right:10px;
}

.z_item li small{
       font-size: 12px;
        color: #999;
}
.sele{
    float: right;
     margin-right: 10px;
     margin-top: 10px;
}
  .button-foot{
        width: 100%;
        background:#9898E7;
    }
    .button-foot .col a{
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 14px;
        text-align: center;
    }


</style>
